import React, { useState, useEffect } from 'react';
import { Steps, Result, Button, message, Tooltip, Table, Row, Col } from 'antd';
import storage from '../../../../utils/storage';
import CodeLabel from '../../../../components/CodeLabel';
import { APIUrl } from '../../../../services/createServices';
import services from '../../../../services/api';
import { IconFont } from '../../../../components/IconFont';
import '../operator.less';
const { Step } = Steps;

export default function(props) {
  const [list, setList] = useState([]);
  const [current, setCurrent] = useState(0);
  useEffect(() => {
    if (!storage.strategyExport || (storage.strategyExport && storage.strategyExport.length === 0)) {
      message.warning('请到策略列表选择需要导出的策略');
      return;
    }
    setList(storage.strategyExport);
    return () => {
      storage.strategyExport = []; // 注销组件时，清空storage.strategyExport
    };
  }, []);
  const steps = [
    {
      title: '确认导出数据'
    },
    {
      title: '导出到文件'
    }
  ];

  //导出
  function exportNow() {
    const ids = list.map(item => item.strategy_id);
    services.policy.reportCheck({ strategy_ids: ids.join(',') }).then(res => {
      if (res.code === 0) {
        const url = `${APIUrl}/strategy/report?strategy_ids=${ids.join(',')}`;
        window.open(url, '_blank');
        //跳转第二步
        setCurrent(1);
        storage.strategyExport = []; // 清空storage.strategyExport
      } else {
        message.error(res.msg);
      }
    });
  }

  const columns = [
    {
      title: '序号',
      render: (text, record, index) => {
        return <>{index + 1}</>;
      }
    },
    {
      title: '策略名称',
      key: 'name',
      dataIndex: 'name',
      width: 200,
      render: (text, record) => {
        return (
          <Tooltip title={text} placement='topLeft'>
            {text}
          </Tooltip>
        );
      }
    },
    {
      title: '策略类型',
      key: 'strategy_type_name',
      dataIndex: 'strategy_type_name',

      ellipsis: true,

      render: text => {
        return (
          <Tooltip title={text} placement='topLeft'>
            {text}
          </Tooltip>
        );
      }
    },
    {
      title: '策略模式',
      key: 'strategy_mode',
      dataIndex: 'strategy_mode',
      ellipsis: true,
      render: text => {
        return (
          <Tooltip title={text} placement='topLeft'>
            <>
              <CodeLabel code='strategy_mode' value={text} />
            </>
          </Tooltip>
        );
      }
    },
    {
      title: '优先级',
      key: 'prior',
      dataIndex: 'prior'
    },
    {
      title: '样本量',
      key: 'sample_rate',
      dataIndex: 'sample_rate',
      render: text => {
        return <>{text}%</>;
      }
    },
    current === 1
      ? {
          title: '导出状态',
          render: (text, record) => {
            return '已导出';
          }
        }
      : false
  ].filter(Boolean);
  return (
    <div className='strategy-operater-wp'>
      <div className='strategy-operater-hd'>
        <Row type='flex' justify='center'>
          <Col span={12}>
            <Steps current={current}>
              {steps.map(item => (
                <Step key={item.title} title={item.title} />
              ))}
            </Steps>
          </Col>
        </Row>
      </div>
      {current === 0 && (
        <>
          <div className='strategy-operater-content'>
            <p>
              请确认您要导出<span className='blue'>{list.length > 0 && list[0].event_name}</span>下的策略数据:
            </p>
            <Table
              className='strategy-operater-table'
              dataSource={list}
              columns={columns}
              rowKey='strategy_id'
              pagination={false}
            />
          </div>
          <div className='strategy-operater-ft'>
            <Row type='flex' justify='center'>
              <Col span={12} style={{ textAlign: 'center' }}>
                <Button type='primary' onClick={() => exportNow()}>
                  导出
                </Button>
              </Col>
            </Row>
            <p>系统会自动将策略使用的指标、字段一并导出</p>
          </div>
        </>
      )}
      {current === 1 && (
        <>
          <div className='strategy-operater-content'>
            <Result
              icon={<IconFont type='iconsuccess-' style={{ fontSize: '42px', fontWeight: 'normal' }} />}
              title='导出成功'
              subTitle={`本次共导出${list.length}条策略`}
            />
            <Table
              className='strategy-operater-table'
              dataSource={list}
              columns={columns}
              rowKey='strategy_id'
              pagination={false}
            />
          </div>
          <div className='strategy-operater-ft'></div>
        </>
      )}
    </div>
  );
}
